<template>
  <div class="cont">
    <div class="common-content cont-main">
      <div class="top-search-bar">
        <el-form size="small" inline>
          <el-form-item>
            <el-date-picker
                v-model="query.dates"
                placement="bottom-start"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                value-format="yyyy-MM-dd HH:mm:ss"
                end-placeholder="结束日期"
                @change="changeDate">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">查询</el-button>
            <el-button type="danger" @click="clearLog">清除</el-button>
            <el-button type="primary" @click="refresh">刷新</el-button>
          </el-form-item>
        </el-form>
      </div>
      <Table
          ref="table"
          :tableHeader="tableHeader"
          :tableData="lists"
          columnType="selection"
          :max-height="tableMaxHeight"
          :pg-total-num="total"
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange">
        <div slot="operation" slot-scope="row">

        </div>
        <div slot="status" slot-scope="row">
          <el-tag v-if="parseInt(row.data.status)===0" type="success" size="mini" effect="dark">成功</el-tag>
          <el-tag v-else type="danger" size="mini" effect="dark">失败</el-tag>
        </div>
      </Table>
    </div>
  </div>
</template>

<script>
import Table from "@/components/Table";
import {get_getLgnLog, get_delLgnLogByDate} from "@/apis/log/log";

export default {
  name: "Loginlog",
  aside: 'comp/CompAside',
  components: {Table},
  directives: {},
  data() {
    return {
      tableHeader: [
        {prop: "loginName", name: "登录名", width: 100},
        {prop: "loginIp", name: "IP", width: 130},
        {prop: "status", name: "状态", tag: true, width: 100},
        {prop: "addTimeStr", name: "时间", width: 170},
        {prop: "loginSession", name: "Session", minWidth: 170},
        {prop: "error", name: "异常信息", minWidth: 170}
      ],
      lists: [],
      total: 0,
      pageSize: 1,
      pageNum: 10,
      query: {
        dates: []
      },
      tableMaxHeight: ''
    };
  },
  mounted() {
    this.getLogin();
    this.$nextTick(() => {
      this.tableMaxHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 50 - 30 - 48 + 'px'
    })
  },
  methods: {
    // 获取登录日志列表
    getLogin(val) {
      get_getLgnLog(
        Object.assign({}, val, {
          pageNum: this.pageSize,
          pageSize: this.pageNum,
        })
      ).then((res) => {
        if (res.data.code != 0) return;
        let {data} = res.data;
        this.total = data.total;
        data.records.forEach((item) => {
          item.addTimeStr = this.$moment(item.addTime).format('YYYY-MM-DD HH:mm:ss')
        });

        if (data.records.length === 0 && this.pageSize > 1) {
          this.pageSize--;
          this.getLogin();
        }
        this.lists = data.records;
      });
    },
    // 删除时间段内的日志列表数据
    clearLog() {
      if (!this.query.dates) {
        return this.$message.warning("请先选择时间范围！");
      }
      this.$confirm(`清除${this.query.dates[0]}至${this.query.dates[1]}的日志数据，是否继续?`, "删除登录日志", {
        confirmButtonText: "清除",
        cancelButtonText: "取消",
        type: "error",
        confirmButtonClass: 'el-button--danger'
      }).then(() => {
        get_delLgnLogByDate({
          beginTime: this.query.dates[0] || null,
          endTime: this.query.dates[1] || null,
        }).then((res) => {
          let {data} = res;
          this.getLogin();
          this.$message.success(data.msg);
        });
      }).catch(() => {

      });
    },
    refresh() {
      this.query.dates = [];
      this.getLogin();
    },
    changeDate() {
      if (this.query.dates) {
        this.getLogin({
          beginTime: this.query.dates[0] || null,
          endTime: this.query.dates[1] || null,
        });
      } else {
        this.getLogin();
      }
    },
    search() {
      if (this.query.dates) {
        this.getLogin({
          beginTime: this.query.dates[0] || null,
          endTime: this.query.dates[1] || null,
        });
      } else {
        this.getLogin();
      }
    },

    handleSizeChange(val) {
      this.pageNum = val;
      this.getLogin();
    },
    handleCurrentChange(val) {
      this.pageSize = val;
      this.getLogin();
    },
  },
};
</script>

<style lang="less" scoped>
  .cont {
    width: 100%;
    position: relative;
    padding: 15px;
    height: 100%;

    .cont-main {
      height: 100%;
      padding: 15px;
    }
  }
</style>
